<template>
  <div class="demo-preview">
    <van-tabs @click="onClick" v-model="active">
      <van-tab :title="item.title" v-for="item in tabList">
        <div class="demo-preview-list" v-for="item in resviersVoList" >
          <img :src="item.customerHandImage">
          <div class="demo-content">
            <h3>{{item.localReviewsTitle}}</h3>
            <p style="color: rgba(151, 149, 149, 100);font-size: 12px;">{{item.localReviersTime}}</p>
            <p>{{item.localReviewsText}}</p>
          </div>
          <div class="demo-contentImg" v-for="(pic,index) in item.pictureList" :key="index">
            <van-image width="10rem" height="10rem" fit="cover" :src="pic.localPictureUrl"/>
<!--            <van-image width="10rem" height="10rem" fit="cover" @click="showPreview(index,pic.localPictureUrl)" :src="pic.localPictureUrl"/>-->

          </div>
          <div class="demo-primary">
            <van-tag plain type="primary" style="padding: 0.25rem">{{item.biaoqian}}</van-tag>
            <van-tag plain type="primary" style="padding: 0.25rem">{{item.biaoqianOne}}</van-tag>
<!--            <van-tag plain type="primary" style="padding: 0.15rem">#设计图纸#</van-tag>-->
          </div>
          <div class="demo-contento" style="text-align: right;padding-top: 0.4rem">
            <div class="demo-contento-chat" @click="huiFuSee(item.localReviewsId)">
              <van-icon name="chat-o" />
              <span class="demo-contento-chats" style="font-size: 0.8rem">{{item.localReviersReply}}</span>
            </div>
            <div class="demo-contento-like" @click="giveThumbsUp(item.localReviewsId,item.localFabulousStatus)">
              <van-icon :name="item.localFabulousStatus==1?name1:name"/>
              <span class="demo-contento-likes" style="font-size: 0.8rem">{{item.localReviersFabulous}}</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 自定义图标 -->
    <van-popup v-model="show" closeable close-icon="close" round  position="bottom" :style="{ height: '60%' }">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="block-top">
            <p>全部评论{{replyVoList.length}}条</p>
<!--            <van-icon name="cross" class="block-top-cross" @click="show = false"/>-->
          </div>


          <div class="block-list">
            <div class="block-list-demo" v-for="item in replyVoList" :key="item.localReplyId">
              <img :src="item.customerHandImage">
              <div class="list-demo-content">
                <div>
                  <h3>{{item.customerNickName}}</h3>
                  <p>{{item.localReplyTime}}</p>
                </div>
                <p style="width: 70%;font-size: 0.7rem">{{item.localReplyText}}</p>
              </div>
              <div class="block-list-like">
<!--                <van-icon name="like-o"/>-->
<!--                <span class="block-list-likes" style="font-size: 0.8rem">{{item.localReplyFabulous}}</span>-->
              </div>
            </div>
          </div>



          <div class="block-bottom">
            <van-cell-group>
              <van-field
                v-model="localReplyText"
                clearable label=""
                left-icon="edit"
                placeholder="评论一下~"
                center
                style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem"
                @click-left-icon="insertLocalReply"
              />
            </van-cell-group>
          </div>
        </div>
      </div>
    </van-popup>
  </div>

</template>

<script>

  import {Toast} from "vant";
  import { Tab, Tabs } from 'vant';

  import {
    selectLocalReviersList,
    selectLocalReplyList,
    addLocalReply,
    selectReplyVoByRevierwsId,
    selectResviersVo,
    localFabulousJia,
    localFabulousJian,
    localFabulousJia1,
    selectResviersByCustomer,
  } from '@/api/customer/local.js'
  import { ImagePreview } from "vant";
  export default {
    name: "LocalList",
    inject:['reload'],
    components: {
      [ImagePreview.Component.name]: ImagePreview.Component,
    },
    data (){
      return{
        index: 0,
        images: [

        ],
        tushow:true,
        show: false,
        localReplyText: '',
        demo: 4,
        demos: 3,
        reviersList: [],
        replyList: [],
        localCount: '',
        localReviersId : '',
        name: 'like-o',
        name1: 'like',
        //回复列表
        replyVoList:[],
        //全部的发布信息
        resviersVoList:[],
        //查询发布的参数
        resviersVo:{},
        //点赞中间表数据参数
        localFabulous:{
          localReviersId:'',
          localFabulousStatus:'',
        },
        active:0,
        tabList:[
          {title:'全部'},
          {title:'我的'},
        ],


      }
    },
    created(){
      this.getSelectResviersVo();
    },
    methods:{
      /** 此处没做好，预览图片用的
      showPreview(index,localPictureUrl){

        ImagePreview({images: images, startPosition: index});
      },
       */
      sceneImg(images,index) {
        ImagePreview({
          images:images, //需要预览的图片 URL 数组
          // showIndex:true, //是否显示页码
          // loop:false, //是否开启循环播放
          // startPosition:index //图片预览起始位置索引
        })
      },


      // // 查询本地评论
      // getLocalReviersList(){
      //   selectLocalReviersList().then((res) =>{
      //     this.reviersList = res.data.data;
      //     console.log(res);
      //   })
      // },
      // // 查询评论回复
      // getLocalReplyList(localReviersId){
      //   this.localReviersId = localReviersId;
      //   this.show = true;
      //   selectLocalReplyList(localReviersId).then((res) =>{
      //     this.replyList = res.data.data;
      //     this.localCount = res.data.data.length;
      //     console.log(res);
      //   })
      // },

      //查看发布信息回复
      huiFuSee(localReviewsId){
        this.localReviersId = localReviewsId;
        this.show = true;
        selectReplyVoByRevierwsId(localReviewsId).then((res)=>{
          this.replyVoList = res.data.data;
          console.log(res);
        })
      },
      // 发表评论
      insertLocalReply(){
        addLocalReply(this.localReviersId,this.localReplyText).then((res) =>{
          console.log(res)
          if(res.code == 500){
            Toast("评论失败");
          }else{
            Toast("评论成功");
            this.huiFuSee(this.localReviersId);
            this.localReplyText = '';
            // this.reload();
          }
        })
      },
      //查询发布的全部信息
      getSelectResviersVo(){
        selectResviersVo(this.resviersVo).then((res)=>{
          this.resviersVoList = res.data.data;
          console.log(res)
        })
      },
      // 点赞
      giveThumbsUp(localReviewsId,localFabulousStatus){
        this.localFabulous.localReviersId = localReviewsId;
        console.log(localReviewsId,localFabulousStatus)
        switch (localFabulousStatus) {
          case 1:
            this.localFabulous.localFabulousStatus = 0;
            localFabulousJian(this.localFabulous).then((res)=>{
              if (res.data.code==200){
                if(this.active==0){
                  this.getSelectResviersVo();
                }else if(this.active==1){
                  this.getSelectResviersByCustomer();
                }
              }
              console.log(res)
            })
            break
          case 0:
            this.localFabulous.localFabulousStatus = 1;
            localFabulousJia1(this.localFabulous).then((res)=>{
              if (res.data.code==200){
                if(this.active==0){
                  this.getSelectResviersVo();
                }else if(this.active==1){
                  this.getSelectResviersByCustomer();
                }
              }
              console.log(res)
            })
            break
          default:
            this.localFabulous.localFabulousStatus = 1;
            localFabulousJia(this.localFabulous).then((res)=>{
              if (res.data.code==200){
                if(this.active==0){
                  this.getSelectResviersVo();
                }else if(this.active==1){
                  this.getSelectResviersByCustomer();
                }
              }
              console.log(res)
            })
            break;
        }
      },
      //查询用户发布的全部本地信息
      getSelectResviersByCustomer(){
        selectResviersByCustomer(this.resviersVo).then((res)=>{
          if(res.data.code==200){
            this.resviersVoList = res.data.data;
          }
          console.log(res);
        })
      },
      //全部和我的
      onClick(name, title){
        if(name==0){
          this.getSelectResviersVo();
        }else if(name==1){
          this.getSelectResviersByCustomer();
        }
        console.log(name, title)
      }

    },
  }
</script>

<style scoped>
  .demo-preview{
    padding: 1rem 1rem;
    padding-bottom: 4rem;
    text-align: left;
  }
  .demo-preview img {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    float: left;
  }
  .demo-content{
    padding-top: 0.375rem;
  }
  .demo-preview .demo-content h3{
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25rem;
  }
  .demo-preview .demo-primary{
    padding: 0.5rem 0;
  }
  .demo-preview .demo-content p{
    margin: 0.8125rem 0 0;
    line-height: 1.25rem;
    font-size: 0.8rem;
  }
  .demo-preview .demo-contento .demo-contento-chat{
    display: inline-block;
    margin-right: 0.4rem;
  }
  .demo-preview .demo-contento .demo-contento-like{
    display: inline-block;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content:center;
    height: 100%;
    position: relative;
    margin-bottom: 50px ;
  }
  .block {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
  }
  .block .block-top{
    padding-left: 1rem;
    font-weight: 700;
  }
  .block .block-bottom{
    padding: 1rem;
    width: 91%;
    position: fixed;
    z-index: 100;
    bottom: 0rem;
    background-color: #fff;
  }

  .block .block-list{
    padding: 1rem 1.5rem;
  }

  .block .block-list .block-list-demo{
    padding: 1rem 0;
    position: relative;
  }

  .block .block-list .block-list-demo .block-list-demos{
    margin-top: 0.5rem;
    margin-left: 2.5rem;
  }
  .block .block-list .block-list-demo .block-list-demos .block-list-ademos{
    padding-top: 0.5rem;
  }
  .block .block-list .block-list-demo .block-list-demos img{
    width: 1rem;
    height: 1rem;
  }

  .block .block-list .block-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block .block-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block .block-list .list-demo-content div{
    padding-bottom: 0.5rem;
  }
  .block .block-list .list-demo-content div h3{
    font-size: 0.75rem;
  }
  .block .block-list .list-demo-content div p{
    font-size: 0.5rem;
  }
  .block .block-list .block-list-like{
    display: inline-block;
  }
  .demo-contentImg{
    display: inline-block;
    margin: 0.07rem;
  }
</style>
